<template>
  <div class="solution_big">
    <HomeTop />
    <div class="solution_big1">
      <div class="solution_top_pic">
        <img class="animate-el" src="../assets/imgs/scheme/superstore.png" alt="" />
        <img class="animate-el" src="../assets/imgs/scheme/yunhao.png" alt="" />
      </div>
      <div class="solution_big_box">
        <div class="solution_head">
          <b class="animate-el">数字化超级门店</b>
          <b class="animate-el">获客超轻松，流量自循环</b>
          <img  class="rotateInDown-Left" src="../assets/imgs/scheme/scheme_pic_1.png" alt="" />
          <div class="tiaowen">
            <div class="beijin"></div>
          </div>
          <div class="head_fool">
            <h2 class="head_fool_h2 animate-el">数字化超级门店聚合解决方案</h2>
            <p class="animate-el">
              5G时代信息来源碎片化愈加严重，传统获客方式成本高、效果差；
              不懂运营、不会营销、客户越来越挑剔，令实体生意更难做！
              云浩科技现推出“超级门店解决方案”业务，
              是一项汇集了数据中心、人像采集、CRM系统为一体的聚合型解决方案，
              帮助实体商户轻松多维获客，实现流量自循环。
            </p>
          </div>
        </div>
        <div class="solution_box">
          <div class="solution_box1  function-Left">
            <div class="solution_box1_left">
              <div class="solution_box1_left_top">
                <img style="" src="../assets/imgs/scheme/pic_1.png" alt="" />
                <div class="tu"></div>
                <h2>多维获客</h2>
                <div class="beijingtu">
                  <div class="beijingtu_1"></div>
                </div>
              </div>
              <div class="solution_box1_left_footh">
                <p>
                  告别传统单一获客渠道，通过数据采集器可以轻松捕获热门商圈
                  /门店周边的多维度公共信息，
                  得到的线下数据更加全面、真实、准确，而且客户转化率更高
                </p>
                <img src="../assets/imgs/scheme/conversion rate.png" alt="" />
              </div>
            </div>
            <div class="solution_box1_right">
              <img src="../assets/imgs/scheme/huoke.png" alt="" />
            </div>
          </div>
          <div class="solution_box2 function-right">
            <div class="solution_box2_left">
              <img src="../assets/imgs/scheme/jiance.png" alt="" />
            </div>
            <div class="solution_box2_right">
              <div class="solution_box2_right_top">
                <div class="solution_box2_right_top_left">
                  <div class="top_bc"></div>
                  <h2>实时监测</h2>
                </div>
                <div class="solution_box2_right_top_right">
                  <img src="../assets/imgs/scheme/pic_2.png" alt="" />
                  <div class="tu"></div>
                </div>
              </div>
              <div class="solution_box2_right_footh">
                <h2>
                  通过大视实时监测门店客流情况，客户的性别、年龄、消费水平、
                  常用APP等清晰可见; 微信小程序可以随时随地查看画像报告，
                  新老客户比例、停留时间等完美呈现，真正用数据管理门店
                </h2>
                <div class="solution_box2_right_footh_img">
                  <img src="../assets/imgs/scheme/detection.png" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="solution_box3 function-Left">
            <div class="solution_box3_left">
              <div class="solution_box3_left_top">
                <div class="solution_box3_left_top_left">
                  <img src="../assets/imgs/scheme/pic_3.png" alt="" />
                  <div class="tu"></div>
                </div>
                <div class="solution_box3_left_top_right">
                  <div class="top_bc"></div>
                  <h2>快速锁定</h2>
                </div>
              </div>
              <div class="solution_box3_left_footh">
                <h2>
                  利用强大的LRA算法,从已采集到的数据库中快速锁定线下目标客户群体；
                  通过互联网行为分析，
                  从庞大的线上大数据库筛选出更多有类似需求的线上目标客户群体
                </h2>
                <div class="solution_box3_left_footh_img">
                  <img src="../assets/imgs/scheme/positioning.png" alt="" />
                </div>
              </div>
            </div>
            <div class="solution_box3_right">
              <img src="../assets/imgs/scheme/suoding.png" alt="" />
            </div>
          </div>
          <div class="solution_box4 function-right">
            <div class="solution_box4_left">
              <img src="../assets/imgs/scheme/toufang.png" alt="" />
            </div>
            <div class="solution_box4_right">
              <div class="solution_box4_right_top">
                <div class="solution_box4_right_top_left">
                  <div class="top_bc"></div>
                  <h2>定向投放</h2>
                </div>
                <div class="solution_box4_right_top_right">
                  <img src="../assets/imgs/scheme/pic_4.png" alt="" />
                  <div class="tu"></div>
                </div>
              </div>
              <div class="solution_box4_right_footh">
                <h2>
                  与国内众多主流媒体APP达成合作,将广告定向投放至目标客户人群,
                  实现跨媒体投放、多渠道曝光，广告展现形式很丰富，客户接受度更高
                </h2>
                <div class="solution_box4_right_footh_img">
                  <img src="../assets/imgs/scheme/directional.png" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="solution_box5 function-Left">
          <div class="solution_box5_left">
              <div class="solution_box5_left_top">
                <div class="solution_box5_left_top_left">
                  <img src="../assets/imgs/scheme/pic_5.png" alt="" />
                  <div class="tu"></div>
                </div>
                <div class="solution_box5_left_top_right">
                  <div class="top_bc"></div>
                  <h2>用户画像</h2>
                </div>
              </div>
            <div class="solution_box5_left_footh">
              <h2>
                每个进店消费的客户都会建立相应的会员档案，通过自定义标签化设置，
                将门店会员进行精细化管理
                使门店客户画像更精准，充分掌握用户真实需求
              </h2>
            <div class="solution_box5_left_footh_img">
              <img src="../assets/imgs/scheme/portrait.png" alt="">
            </div>
            </div>
          </div>
          <div class="solution_box5_right">
            <img src="../assets/imgs/scheme/huaxiang.png" alt="" />
          </div>
        </div>
          <div class="solution_box6 function-right">
          <div class="solution_box6_left">
            <img src="../assets/imgs/scheme/yinxiao.png" alt="" />
          </div>
          <div class="solution_box6_right">
            <div class="solution_box6_right_top">
              <div class="solution_box6_right_top_tu"></div>
              <img src="../assets/imgs/scheme/pic_6.png" alt="" />
              <div class="solution_box6_right_top_pic"></div>
              <h2>精准营销</h2>
            </div>
            <div class="solution_box6_right_footh">
              <h2>
                通过AI人脸识别技术，在顾客进店的瞬间，
                其以往在该品牌门店的消费情况将立即被推送至对应员工的移动设备上，
                员工可从中提取有效信息，
                进行1对1个性化服务/营销，门店会员转化留存率得到大幅提升
              </h2>
              <div class="solution_box6_right_footh_img">
                <img src="../assets/imgs/scheme/marketing.png" alt="">
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
      <HomeBottom/>
    </div>
  </div>
</template>

<script>
import Observer from '../utils/observer';
import HomeTop from "@/components/Hometop.vue";
import HomeBottom from "@/components/Homebottom.vue";
export default {
  name: "Solution",
  components: {
    HomeTop,
    HomeBottom,
  },
  // mounted(){
  //       const els = document.querySelectorAll('.function-item')
  //       const els2 = document.querySelectorAll('.animater-el')
  //       const allel = [...els,...els2];
  //       this.observer = Observer({
  //               els:allel,
  //               threshold:0.2
  //           },(el)=>{
  //               const classStr = el.dataset.animater.split(',');
  //               el.style.visibility = 'visible';
  //               el.classList.add(classStr[0])
  //           })
  //   },
   mounted() {
    const els = document.querySelectorAll(".animate-el");
    this.Observer = Observer(
      {
        els: els,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__fadeInDown");
      }
    );
    const els2 = document.querySelectorAll(".function-Left");
    this.Observer2 = Observer(
      {
        els: els2,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__bounceInLeft");
      }
    );
    const els3 = document.querySelectorAll(".function-right");
    this.Observer3 = Observer(
      {
        els: els3,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__bounceInRight");
      }
    );
    const els4 = document.querySelectorAll(".rotateInDown-Left");
    this.Observer4 = Observer(
      {
        els: els4,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__rotateInDownRight");
      }
    );
    let registerData = {
      companyName: "",
      phoneNumber: "",
      linkman: "",
      companyAdress: "",
      leaveMessage: "",
    };
  },
  beforeDestroy(){
    this.Observer && window.removeEventListener('scroll',this.Observer);
    this.Observer && window.removeEventListener('scroll',this.Observer2);
    this.Observer && window.removeEventListener('scroll',this.Observer3);
    this.Observer && window.removeEventListener('scroll',this.Observer4);
  },
};
</script>
<style scoped>
.solution_big1 {
  background: #5da6d9 url("../assets/imgs/scheme/scheme_bg.jpg") no-repeat;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.solution_top_pic {
  padding-top: 108px;
  position: relative;
  left: 150px;
}
.solution_top_pic img {
  max-width: 40%;
  height: auto;
}
.solution_top_pic img:nth-child(2) {
  max-width: 35%;
  height: auto;
  position: relative;
  top: 79px;
  left: 30px;
  margin-top: 10px;
}
.solution_head {
  position: relative;
}
.solution_head b:nth-child(1) {
  color: azure;
  font-size: 113px;
  position: absolute;
  top: 32px;
  left: 118px;
}
.solution_head b:nth-child(2) {
  color: aliceblue;
  font-size: 71px;
  position: absolute;
  top: 186px;
  left: 123px;
}
.solution_big_box .solution_head img {
  float: right;
  margin-top: 50px;
  max-width: 100%;
  height: auto;
}

.solution_head .tiaowen {
  position: relative;
  top: 207px;
  left: 146px;
}
.solution_head .tiaowen .beijin {
  color: #fff;
  height: 13rem;
  background: url("../assets/imgs/scheme/shape_17.png") left bottom no-repeat;
  background-size: 39.266667rem 5.833333rem;
  text-align: center;
}
.head_fool {
  width: 681px;
  height: 189px;
  margin-top: 600px;
  margin-left: 120px;
}
.head_fool .head_fool_h2 {
  font-size: 42px;
  color: #fff;
  background: linear-gradient(94deg, #edaee6 0%, #52a0d6 100%);
  font-weight: bold;
  text-shadow: -5px;
}
.head_fool p {
  color: #fff;
  font-size: 23px;
  text-indent: 50px;
  padding: 10px;
  line-height: 35px;
}
.solution_box {
  width: 100%;
}
.solution_box1 {
  width: 1503px;
  height: 555px;
  margin: auto;
  margin-top: 300px;
}
.solution_box1_left {
  width: 770px;
  height: 555px;
  background: linear-gradient(
    -54deg,
    rgba(29, 159, 235, 0.83),
    rgba(255, 188, 249, 0.83)
  );
  border-top-right-radius: 175px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  float: left;
}
.solution_box1_left_top {
  width: 607px;
  height: 178px;
  position: relative;
  top: 91px;
  left: 59px;
}
.solution_box1_left_top img {
  float: left;
  z-index: 99;
  position: relative;
}
.solution_box1_left_top .tu {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ffc6f9;
  position: relative;
  top: 99px;
  left: 58px;
}

.solution_box1_left_top .beijingtu {
  position: relative;
  top: -82px;
  left: 19%;
}
.solution_box1_left_top .beijingtu_1 {
  color: #fff;
  height: 13rem;
  background: url("../assets/imgs/scheme/shape_18.png") no-repeat;
  background-size: 32.266667rem 4.833333rem;
  text-align: center;
}
.solution_box1_left_top h2 {
  font-size: 84px;
  color: #fff;
  position: absolute;
  left: 26%;
  top: 40%;
  font-weight: 700;
}
.solution_box1_left_footh {
  width: 637px;
  height: 100px;
  line-height: 33px;
  margin-top: 150px;
  margin-left: 25px;
}
.solution_box1_left_footh p {
  font-size: 20px;
  text-indent: 50px;
  color: #fff;
}
.solution_box1_left_footh img {
  margin-top: 59px;
}
.solution_box1_right img {
  position: relative;
  top: -653px;
  left: 77px;
  float: right;
}
.solution_box2 {
  width: 1503px;
  height: 555px;
  margin: auto;
  margin-top: 221px;
}
.solution_box2_left {
  margin: 0;
  padding: 0;
  width: 655px;
  height: 551px;
  /* float: left; */
}
.solution_box2_right {
  width: 770px;
  height: 555px;
  background: linear-gradient(
    -54deg,
    rgba(29, 159, 235, 0.83),
    rgba(188, 227, 255, 0.83)
  );
  border-top-left-radius: 175px;
  float: right;
  position: relative;
  top: -551px;
}
.solution_box2_right_top {
  width: 681px;
  height: 168px;
  margin-top: 70px;
  margin-left: 61px;
  box-sizing: border-box;
}
.solution_box2_right_top_left {
  width: 528px;
  height: 123px;
  margin-left: 0;
  padding: 0;
  float: left;
  box-sizing: border-box;
  margin-top: 22px;
}
.top_bc {
  color: #fff;
  background: url("../assets/imgs/scheme/shape_18.png") no-repeat;
  background-size: 32.266667rem 4.833333rem;
  text-align: center;
  width: 526px;
  height: 80px;
}
.solution_box2_right_top_left h2 {
  color: #fff;
  font-size: 84px;
  font-weight: 700;
  position: relative;
  top: -59px;
  left: 150px;
}
.solution_box2_right_top_right {
  width: 151px;
  height: 165px;
  float: right;
  box-sizing: border-box;
}
.solution_box2_right_top_right img {
  margin-left: 20px;
  max-width: 87%;
  height: auto;
  z-index: 2;
  position: relative;
}
.solution_box2_right_top_right .tu {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ffc6f9;
  position: relative;
  top: -94px;
  left: 17px;
}
.solution_box2_right_footh {
  width: 600px;
  height: 100px;
}
.solution_box2_right_footh h2 {
  font-size: 21px;
  text-indent: 50px;
  color: #fff;
  margin-top: 59px;
  margin-left: 40px;
}
.solution_box2_right_footh_img img {
  width: 673px;
  height: 100px;
  margin-top: 39px;
  margin-left: 40px;
}
.solution_box3 {
  width: 1503px;
  height: 555px;
  margin: auto;
  margin-top: 221px;
}
.solution_box3_left {
  width: 770px;
  height: 555px;
  background: linear-gradient(
    -54deg,
    rgba(29, 159, 235, 0.83),
    rgba(190, 188, 255, 0.83)
  );
  border-top-right-radius: 175px;
}
.solution_box3_left_top {
  width: 689px;
  height: 169px;
  position: relative;
  top: 60px;
  margin-left: 40px;
}
.solution_box3_left_top_left {
  width: 151px;
  height: 165px;
  margin-left: 0;
  padding: 0;
  float: left;
}
.solution_box3_left_top_left img {
  max-width: 87%;
  height: auto;
  z-index: 2;
  position: relative;
}
.solution_box3_left_top_left .tu {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ffc6f9;
  position: relative;
  top: -101px;
  left: 67px;
}
.solution_box3_left_top_right {
  width: 528px;
  height: 123px;
  float: right;
  box-sizing: border-box;
  margin-top: 22px;
}
.solution_box3_left_top_right .top_bc {
  color: #fff;
  background: url("../assets/imgs/scheme/shape_18.png") no-repeat;
  background-size: 32.266667rem 4.833333rem;
  text-align: center;
  width: 526px;
  height: 80px;
}
.solution_box3_left_top_right h2 {
  color: #fff;
  font-size: 84px;
  font-weight: 700;
  position: relative;
  top: -60px;
  left: 15px;
}
.solution_box3_left_footh {
  width: 600px;
  height: 100px;
}
.solution_box3_left_footh h2 {
  font-size: 20px;
  text-indent: 50px;
  color: #fff;
  margin-top: 144px;
}
.solution_box3_left_footh img {
  margin-top: 72px;
  margin-left: 20px;
}

.solution_box3_right {
  float: right;
  position: relative;
  top: -509px;
  left: 30px;
}
.solution_box4 {
  width: 1503px;
  height: 555px;
  margin: auto;
  margin-top: 221px;
}
.solution_box4_left {
  float: left;
}
.solution_box4_right {
  width: 770px;
  height: 555px;
  background: linear-gradient(
    -54deg,
    rgba(29, 159, 235, 0.83),
    rgba(180, 244, 212, 0.83)
  );
  border-top-left-radius: 175px;
  float: right;
  position: relative;
  top: -232px;
}
.solution_box4_right_top {
  width: 681px;
  height: 168px;
  margin-top: 70px;
  margin-left: 61px;
  box-sizing: border-box;
}
.solution_box2_right_top_left {
  width: 528px;
  height: 123px;
  margin-left: 0;
  padding: 0;
  float: left;
  box-sizing: border-box;
  margin-top: 22px;
}
.solution_box4_right_top .top_bc {
  color: #fff;
  background: url("../assets/imgs/scheme/shape_18.png") no-repeat;
  background-size: 32.266667rem 4.833333rem;
  text-align: center;
  width: 526px;
  height: 80px;
}
.solution_box4_right_top_left h2 {
  color: #fff;
  font-size: 84px;
  font-weight: 700;
  position: relative;
  top: -59px;
  left: 150px;
}
.solution_box4_right_top_right {
  width: 151px;
  height: 165px;
  float: right;
  box-sizing: border-box;
}
.solution_box4_right_top_right img {
  margin-left: 20px;
  max-width: 87%;
  height: auto;
  z-index: 2;
  position: relative;
  top: -189px;
  left: -12px;
}
.solution_box4_right_top_right .tu {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ffc6f9;
  position: relative;
  top: -288px;
  left: 17px;
}
.solution_box4_right_footh {
  width: 600px;
  height: 100px;
  margin-top: 53px;
  margin-left: 34px;
}
.solution_box4_right_footh h2 {
  font-size: 22px;
  text-indent: 50px;
  color: #fff;
}
.solution_box4_right_footh_img {
  width: 685px;
  height: 92px;
}
.solution_box4_right_footh_img img{
  margin-top: 33px;
}
.solution_box5 {
  width: 1503px;
  height: 555px;
  margin: auto;
  margin-top: 221px;
}
.solution_box5_left {
  width: 770px;
  height: 555px;
  background: linear-gradient(
    -54deg,
    rgba(29, 159, 235, 0.83),
    rgba(254, 240, 161, 0.83)
  );
  border-top-right-radius: 175px;
  float: left;
  position: relative;
  top: -11px;
}
.solution_box5_left_top{
    width: 689px;
  height: 169px;
  position: relative;
  top: 60px;
  margin-left: 40px;
}
.solution_box5_left_top_left {
  width: 151px;
  height: 165px;
  margin-left: 0;
  padding: 0;
  float: left;
}
.solution_box5_left .tu {
 width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ffc6f9;
  position: relative;
  top: -101px;
  left: 67px;
}
.solution_box5_left img {
   max-width: 87%;
  height: auto;
  z-index: 2;
  position: relative;
}
.solution_box5_left_top_right .top_bc{
  color: #fff;
  background: url("../assets/imgs/scheme/shape_18.png") no-repeat;
  background-size: 32.266667rem 4.833333rem;
  text-align: center;
  width: 526px;
  height: 80px;
  position: relative;
  left: 126px;
}
.solution_box5_left h2 {
  font-size: 94px;
  color: #fff;
  position: relative;
  top: -47px;
  left: 14px;
  font-weight: 700;
}
.solution_box5_left_footh {
  width: 700px;
  height: 100px;
  position: relative;
  top: 186px;
}
.solution_box5_left_footh h2 {
  font-size: 23px;
  text-indent: 50px;
  color: #fff;
  font-weight: normal;
}
.solution_box5_left_footh_img img {
  width: 685px;
  height: 92px;
  margin-left: 70px;
}
.solution_box5_right img {
max-width: 48%;
height: auto;
float: right;
}
.solution_box6 {
  width: 1503px;
  height: 555px;
  margin: auto;
  margin-top: 221px;
  margin-bottom: 159px;
}
.solution_box6_left {
  position:relative;
  float: left;
  max-width: 47%;
  height: auto;
}
.solution_box6_left img{
  max-width: 96%;
  height: auto;
  margin-top: 104px;
}
.solution_box6_right {
  width: 770px;
  height: 555px;
  background: linear-gradient(
    -54deg,
    rgba(38, 196, 236, 0.83),
    rgba(255, 190, 216, 0.83)
  );
  border-top-left-radius: 175px;
  position:relative;
  float: right;
}
.solution_box6_right_top_tu {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ffc6f9;
  position: absolute;
  top: 32%;
  left: 72%;
}
.solution_box6_right_top img {
  position: absolute;
  top: 14%;
  left: 74%;
}
.solution_box6_right_top_pic {
  color: #fff;
  height: 13rem;
  background: url("../assets/imgs/scheme/shape_18.png") no-repeat;
  background-size: 32.266667rem 4.833333rem;
  text-align: center;
  position: relative;
  top: 120px;
  left: 4%;
}
.solution_box6_right_top h2 {
  font-size: 94px;
  color: #fff;
  position: absolute;
  top: 25%;
  left: 19%;
  font-weight: 700;
}
.solution_box6_right_footh {
  width: 700px;
  height: 100px;
  position: absolute;
  top: 57%;
  left: 6%;
}
.solution_box6_right_footh h2 {
  font-size: 20px;
  text-indent: 50px;
  color: #fff;
}
.solution_box6_right_footh_img img {
  width: 660px;
  height: 97px;
  position: absolute;
  top: 142%;
  left: 4%;
}
</style>